<template>
	<loading-wait v-if="loading" ></loading-wait>
	<view class="uni-global-box" >
		<view class="uni-global-title">
			系统设置 / 菜单管理 / 新增菜单
		</view>
		<view class="body">
			<view class="parent-title" v-if="form.parent_id" >
				父类：{{parent.title}}
			</view>
			<u-form :model="form" ref="form1" class="u-form" label-width="0" >
				<view class="u-form-textInput">
					<view class="u-form-name">
						唯一标识
					</view>
					<u-form-item prop="menu_id" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.menu_id" 
							style="margin:0"
							placeholder="请输入唯一标识"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						分类标题
					</view>
					<u-form-item prop="title" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.title" 
							style="margin:0"
							placeholder="请输入标题"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						菜单排序
					</view>
					<u-form-item prop="sort" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.sort" 
							style="margin:0" 
							type="number" placeholder="请输入菜单排序"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						菜单图标
					</view>
					<u-form-item prop="icon" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.icon" 
							style="margin:0"
							placeholder="请输入图标"
						/>
						<view class="icon" @click="this.showIcon = true" > 
							&nbsp;
							<text class="iconfont icon-zujian"></text>
							<text>内置图标</text>
						</view>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						是否为阿里巴巴图标
					</view>
					<u-form-item label="" prop="radio"  :border-bottom="false">
						<u-radio-group v-model="form.is_alibaba_icon">
							<u-radio v-for="(item, index) in radioList2" :key="index" :name="item.value"
								:disabled="item.disabled">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</view>
				
				<view class="u-form-textInput">
					<view class="u-form-name">
						跳转链接
					</view>
					<u-form-item prop="" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.url" 
							style="margin:0" 
							placeholder="请输入跳转链接"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						是否展示
					</view>
					<u-form-item label="" prop=""  :border-bottom="false">
						<u-radio-group v-model="form.is_show">
							<u-radio v-for="(item, index) in radioList1" :key="index" :name="item.value"
								:disabled="item.disabled">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</view>
				<u-button @click="submit" type="primary" >提交</u-button>
			</u-form>
		</view>
	</view>
	
	<u-popup v-model="showIcon" mode="center" >
		<view class="popup-box" @click="this.showIcon = false" >
			<ui-icon></ui-icon>
		</view>
	</u-popup>
	
	<u-toast ref="uToast" />
</template>

<script>
	const menuDb = uniCloud.importObject("menu",{customUI:true});
	import {rules,form,radioList1,radioList2} from '/common/js_file/menu-manage.js' ;
	export default {
		data() {
			let form = {
				"parent_id": null,
				"menu_id": '',
				"title": '',
				"icon": '',
				"is_show": 1,
				"sort": '',
				"url": null,
				"is_alibaba_icon": 1,
				"create_date": null,
				"create_uid": null
			}
			return {
				loading:false,
				form,
				radioList1,
				radioList2,
				rules:rules,
				parent:{},
				showIcon:false,
			}
		},
		onLoad(val) {
			if(val.uid){
				this.form.parent_id = val.uid ;
				this.parent.title = val.title ;
			}
		},
		methods: {
			async submit() {
				this.$refs.form1.validate(async valid => {
					if (valid) {
						this.loading = true ;
						let verifyUniquenessMenuId = await menuDb.verifyUniquenessMenuId(this.form.menu_id)
						if(verifyUniquenessMenuId.code == 200){
							if(verifyUniquenessMenuId.result == 1){
								return this.$refs.uToast.show({title: '唯一标识重复',type: 'error',duration:2000,position:'center'})
							}
						}
						this.form.create_date = Date.now() ;
						this.onInsert(this.form) ;
					} else {
						console.log('验证失败',this.form);
					}
				});
			},
			// 添加
			onInsert(form){
				menuDb.addMenu(form).then(result => {
					this.loading = false ;
					if(result.code == 200){
						this.$refs.uToast.show({
							title: result.message, type: 'primary',
							duration:500,position:'top',
							url: '/pages/system/menu-manage/menu-manage'
						})
					}
				})
			},
		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		}
	}
</script>

<style scoped lang="scss" >
	.popup-box{
		width:688px;
		padding:10px;
	}
	.icon{
		cursor: pointer;
		color:$uni-color-primary;
	}
	.parent-title{
		border-radius: 5px;
		padding:10px 5px;
		margin:5px 0;
		font-weight: bold;
		background: #f0f3f4;
	}
.body{
		padding:10px 30px;
		width: 50%;
	}
</style>
